<template>
  <div class="sql-toolbar">
    <div class="sql-toolbar__left">
      <!-- 执行 -->
      <div class="sql-toolbar__group">
        <button
          class="sql-toolbar__button sql-toolbar__button--primary"
          @click="$emit('execute')"
          title="执行 (F5)"
        >
          <ExecuteIcon />
          执行
        </button>
        
        <!-- 执行选中内容 -->
        <button
          v-if="hasSelection"
          class="sql-toolbar__button sql-toolbar__button--primary sql-toolbar__button--success"
          @click="$emit('execute-selected')"
          title="执行选中内容 (Ctrl+Enter)"
        >
          <ExecuteSelectionIcon />
          执行选中
        </button>
      </div>
      
      <!-- 撤销/重做 -->
      <div class="sql-toolbar__group">
        <button
          class="sql-toolbar__button"
          :disabled="!canUndo"
          @click="$emit('undo')"
          title="撤销 (Ctrl+Z)"
        >
          <UndoIcon />
        </button>
        <button
          class="sql-toolbar__button"
          :disabled="!canRedo"
          @click="$emit('redo')"
          title="重做 (Ctrl+Y)"
        >
          <RedoIcon />
        </button>
      </div>

      <!-- 格式化 -->
      <div class="sql-toolbar__group">
        <button
          class="sql-toolbar__button"
          @click="$emit('format')"
          title="格式化 (Ctrl+Shift+F)"
        >
          <FormatIcon />
          格式化
        </button>
      </div>

      <!-- 验证 -->
      <div class="sql-toolbar__group">
        <button
          class="sql-toolbar__button"
          :class="{
            'sql-toolbar__button--error': hasErrors,
            'sql-toolbar__button--warning': hasWarnings && !hasErrors
          }"
          @click="$emit('validate')"
          title="验证SQL (Ctrl+Shift+V)"
        >
          <ValidateIcon />
          验证
          <span v-if="hasErrors" class="sql-toolbar__badge sql-toolbar__badge--error">
            {{ errorCount }}
          </span>
          <span v-else-if="hasWarnings" class="sql-toolbar__badge sql-toolbar__badge--warning">
            {{ warningCount }}
          </span>
        </button>
      </div>

      <!-- 清空 -->
      <div class="sql-toolbar__group">
        <button
          class="sql-toolbar__button sql-toolbar__button--danger"
          @click="handleClear"
          title="清空编辑器"
        >
          <ClearIcon />
          清空
        </button>
      </div>
    </div>

    <div class="sql-toolbar__right">
      <!-- 键盘快捷键说明 -->
      <div class="sql-toolbar__info sql-toolbar__shortcuts">
        <el-tooltip content="F5: 执行, Ctrl+Enter: 执行选中, F10: 切换工具栏, Ctrl+Shift+F: 格式化" placement="bottom">
          <span class="sql-toolbar__shortcut-icon">⌨</span>
        </el-tooltip>
      </div>
      
      <!-- SQL类型 -->
      <div v-if="sqlType !== 'unknown'" class="sql-toolbar__info">
        <span class="sql-toolbar__label">类型:</span>
        <span class="sql-toolbar__value sql-toolbar__sql-type" :class="`sql-toolbar__sql-type--${sqlType}`">
          {{ sqlType.toUpperCase() }}
        </span>
      </div>

      <!-- 统计信息 -->
      <div class="sql-toolbar__info">
        <span class="sql-toolbar__label">行数:</span>
        <span class="sql-toolbar__value">{{ lineCount }}</span>
      </div>
      
      <div class="sql-toolbar__info">
        <span class="sql-toolbar__label">字符:</span>
        <span class="sql-toolbar__value">{{ characterCount }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// Props
const props = defineProps({
  canUndo: {
    type: Boolean,
    default: false
  },
  canRedo: {
    type: Boolean,
    default: false
  },
  hasErrors: {
    type: Boolean,
    default: false
  },
  hasWarnings: {
    type: Boolean,
    default: false
  },
  sqlType: {
    type: String,
    default: 'unknown'
  },
  characterCount: {
    type: Number,
    default: 0
  },
  lineCount: {
    type: Number,
    default: 1
  },
  errorCount: {
    type: Number,
    default: 0
  },
  warningCount: {
    type: Number,
    default: 0
  },
  hasSelection: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits([
  'undo',
  'redo',
  'format',
  'validate',
  'clear',
  'execute',
  'execute-selected'
])

// 处理清空确认
const handleClear = () => {
  if (props.characterCount > 0) {
    if (confirm('确定要清空编辑器内容吗？此操作不可撤销。')) {
      emit('clear')
    }
  } else {
    emit('clear')
  }
}

// 图标组件（简单的SVG图标）
const ExecuteIcon = {
  template: `
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <polygon points="5 3 19 12 5 21 5 3" />
    </svg>
  `
}

// 执行选中内容图标
const ExecuteSelectionIcon = {
  template: `
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <polygon points="5 3 19 12 5 21 5 3" />
      <rect x="2" y="9" width="4" height="6" fill="currentColor" stroke="none" />
    </svg>
  `
}

const UndoIcon = {
  template: `
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M3 7v6h6" />
      <path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13" />
    </svg>
  `
}

const RedoIcon = {
  template: `
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M21 7v6h-6" />
      <path d="M3 17a9 9 0 019-9 9 9 0 016 2.3L21 13" />
    </svg>
  `
}

const FormatIcon = {
  template: `
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M4 7V4h16v3" />
      <path d="M9 20h6" />
      <path d="M12 4v16" />
    </svg>
  `
}

const ValidateIcon = {
  template: `
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M9 12l2 2 4-4" />
      <circle cx="12" cy="12" r="9" />
    </svg>
  `
}

const ClearIcon = {
  template: `
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M3 6h18" />
      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
    </svg>
  `
}
</script>

<style scoped>
.sql-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  height: 42px;
}

.sql-toolbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sql-toolbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sql-toolbar__group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-right: 1px solid #e5e7eb;
}

.sql-toolbar__group:last-child {
  border-right: none;
}

.sql-toolbar__button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  color: #374151;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.sql-toolbar__button:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.sql-toolbar__button:active:not(:disabled) {
  background: #e5e7eb;
}

.sql-toolbar__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sql-toolbar__button--primary {
  background: #3b82f6;
  color: white;
  border-color: #2563eb;
}

.sql-toolbar__button--primary:hover:not(:disabled) {
  background: #2563eb;
  border-color: #1d4ed8;
}

.sql-toolbar__button--primary:active:not(:disabled) {
  background: #1d4ed8;
}

.sql-toolbar__button--danger {
  color: #dc2626;
  border-color: #fca5a5;
}

.sql-toolbar__button--danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #f87171;
}

.sql-toolbar__button--error {
  color: #dc2626;
  border-color: #fca5a5;
  background: #fef2f2;
}

.sql-toolbar__button--warning {
  color: #d97706;
  border-color: #fcd34d;
  background: #fffbeb;
}

.sql-toolbar__button--success {
  background: #10b981;
  color: white;
  border-color: #059669;
}

.sql-toolbar__button--success:hover:not(:disabled) {
  background: #059669;
  border-color: #047857;
}

.sql-toolbar__button--success:active:not(:disabled) {
  background: #047857;
}

.sql-toolbar__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.sql-toolbar__badge--error {
  background: #dc2626;
}

.sql-toolbar__badge--warning {
  background: #d97706;
}

.sql-toolbar__info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.sql-toolbar__label {
  color: #6b7280;
}

.sql-toolbar__value {
  color: #374151;
  font-weight: 500;
}

.sql-toolbar__shortcuts {
  cursor: help;
  margin-right: 16px;
}

.sql-toolbar__shortcut-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #e5e7eb;
  border-radius: 4px;
  color: #4b5563;
  font-size: 14px;
}

.sql-toolbar__sql-type {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.sql-toolbar__sql-type--select {
  background: #dbeafe;
  color: #1d4ed8;
}

.sql-toolbar__sql-type--insert {
  background: #dcfce7;
  color: #166534;
}

.sql-toolbar__sql-type--update {
  background: #fef3c7;
  color: #92400e;
}

.sql-toolbar__sql-type--delete {
  background: #fee2e2;
  color: #991b1b;
}

.sql-toolbar__sql-type--create {
  background: #f3e8ff;
  color: #6b21a8;
}

.sql-toolbar__sql-type--drop {
  background: #fecaca;
  color: #7f1d1d;
}

.sql-toolbar__sql-type--alter {
  background: #e0e7ff;
  color: #3730a3;
}
</style> 